<template>
    <view>
        <view class="cu-bar bg-white solid-bottom solid-top">
            <view class="action">
                {{title}}
            </view>
            <view class="action">
                <view class="text-center text-blue" >
                    更多
                </view>
            </view>
        </view>
        <view class="bg-white padding">
            <scroll-view class="scroll-view" scroll-x="true" scroll-left="15">
                <movieCard class="scroll-view-item margin-right-sm"
                           :class="'col-'+col"
                           v-for="(item,index) in movie_list" :key="index"
                ></movieCard>
            </scroll-view>
        </view>
    </view>
</template>

<script>
    import movieCard from "@/components/movie_card.vue";

    export default {
        name: "movie_scroll",
        props: {
            title:{
              default: "测试数据"
            },
            movie_list: {
                type: Array,
                default: []
            },
            col:{
                default: 2
            }
        },
        components: {movieCard}
    }
</script>

<style scoped lang="scss">
    .scroll-view {
        white-space: nowrap;

        .col-2{
            width: calc((100% - 20upx) / 2);
        }
        .col-3{
            width: calc((100% - 20upx) / 3);
        }
        .scroll-view-item {
            display: inline-block;

        }
    }
</style>
